<template>
  <div :class="`tw-libradio x${_uid}`">
     <label v-if="title"
      class="tw-libradio-label">{{title}}:</label>
      <div class="tw-libradio-data">
    <el-radio-group v-model="val"
     @change="changeValue"
     @blur="blurValue"
     :size="size">
      <template v-if="radiotype">
        <el-radio-button v-for="(item, idx) in list" :key="idx"
          :label="item.value"
          :disabled="item.disabled ? item.disabled : false"
          :border="border"
          :text-color="textColor"
          :fill="fillColor">
          {{item.label}}
        </el-radio-button>
      </template>
      <template v-else>
        <el-radio v-for="(item, idx) in list" :key="idx"
          :label="item.value"
          :disabled="item.disabled ? item.disabled : false"
          :border="border">
          {{item.label}}
        </el-radio>
      </template>
    </el-radio-group>
    <div v-if="validValue && errText" class="tw-validinput-err">{{errText}}</div>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libradio',

  props,

  data() {
    return {
      val: '',
      valdisabled: false,
      errText: ''
    }
  },

  methods: {
    changeValue (value) {
      if (this.validData('change')) {
        this.$emit('input', value)
        this.$emit('change', value)
      }
    },
    blurValue () {
      this.validData('blur')
    },
    validData (now) {
      let vm = this
      let errText = ''

      if (this.validValue && this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          let trigger = itm.trigger || 'blur'
          if (now === trigger) {
            if (itm.required !== undefined && itm.required && !vm.val) {
              errText = itm.message
            }
          }
        })
      }

      vm.errText = errText
      return !errText
    },

    setStyle () {
      let style = `
        .x${this._uid} .tw-libradio-label {
          width: ${this.labelWidth};
          line-height: ${this.titleHeight};
          font-weight: ${this.titleWeight};
        }
      `

      if (this.validValue) {
        style += `
          .x${this._uid} .tw-libradio-label::before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
          }
        `
      }

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    disValue () {
      this.valdisabled = this.disabled
      if (this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          if (itm.disabled !== undefined && itm.disabled) {
            this.valdisabled = itm.disabled
          }
        })
      }
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        focusBorderColor: this.focusBorderColor
      }
    }
  },

  mounted () {
    this.disValue()
    this.setStyle()
  },

  watch: {
    value () {
      this.val = this.value
    },
    validRules: {
      deep: true,
      handler () {
        this.disValue()
      }
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
